<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>greet</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        function Greeting(props) {
            const { isLoginIn } = props
            if (isLoginIn) {
                return(<LoginGreeting />)
            } else {
                return (<OutGreet />)
            }
        }
        class LoginGreeting extends React.Component {
            render() {
               return <h1>我是登陆页面</h1>
            }
        }
        class OutGreet extends React.Component {
            render() {
               return <h1>我是注销页面</h1>
            }
        }
        function LoginButton(props) {
            const { onClick } = props
            return (
                <button onClick={onClick}> 登陆</button>
            )
        }
        function LoginOutButton(props) {
            const { onClick } = props
            return (
                <button onClick={onClick}>注销</button>
            )
        }
        class LoginController extends React.Component {
            constructor(props) {
                super(props)
                this.state = { isLoginIn: false }
            }
            handlerlogin = () => {
                this.setState({ isLoginIn: false })
            }
            handlerOutlogin = () => {
                this.setState({ isLoginIn: true })
            }

            render() {
                const { isLoginIn } = this.state
                let button;
                if (isLoginIn) {
                    button = <LoginButton onClick={this.handlerlogin} />;
                } else {
                    button = <LoginOutButton onClick={this.handlerOutlogin} />;
                }
                return (
                    <div>
                        <Greeting isLoginIn={!isLoginIn} />
                        {button}
                    </div>
                )
            }

        }
        ReactDOM.render(
            <LoginController />,
            document.getElementById('test')

        )
    </script>
</body>

</html>